<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 响应式的导航栏</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jfcss.css" rel="stylesheet">
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.goup.min.js"></script>
    <script type="text/javascript" src="js/jframe.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
</head>
<body >
<nav id="jf-head-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">

</nav>
<div class="container">

    <div class="row">
        <div class="col-md-9 col-sm-12">
            <!--专辑简述-->
            <div class="col-xs-12" style="padding: 0px;background-color: #fff">


                <div class="col-md-4 col-sm-4 col-xs-12" style="padding: 0px">
                    <img src="img/6.jpeg" style="max-width: 100%">
                 </div>
                <div class="col-md-8 col-sm-8 col-xs-12 jf-">

                    <div class="">
                        <div class="jf-hr" style="margin-top: 10px">

                            <div class="col-xs-9" style="padding: 0px;overflow: hidden">xiaoYOY</div>
                            <!--<h3 class="col-sm-3"><a  class="" id="focusOnUser" href="javascript:0;">关注</a></h3>-->
                            <!--编辑或者关注-->
                            <!--glyphicon glyphicon-star 关注，或者编辑-->
                            <div class="col-xs-3 text-right" >
                                <a id="editUser" href="javascript:0;">
                                <span class="hidden-xs">编辑</span>
                                <span class="glyphicon glyphicon-edit"></span>
                                </a>
                            </div>

                        </div>
                        <div class="col-xs-4  jf-cell">8000+浏览</div>
                        <div class="col-xs-4  jf-cell">500+赞</div>
                        <div class="col-xs-4  jf-cell">100个关注</div>
                        <div style="padding: 0px" class="col-xs-12">
                            <h4 >个人公告</h4>
                            <p>
                                暂时没有任何说明。暂时没有任何说明,暂时没有任何说明,暂时没有任何说明暂时没有任何说明暂时没有任何说明暂时没有任何说明暂时没有任何说明暂时没有任何说明暂时没有任何说明暂时没有任何说明。暂时没有任何说明,暂时没有任何说明,暂时没有任何说明暂时没有任何说明暂时没有任何说明暂时没有任何说明暂时没有任何说明
                            </p>
                        </div>
                    </div>

                </div>

            </div>

            <!--文章列表-->
            <div class="jf-hr">
                文章列表
                <a style="float: right;margin: 0px 10px" href="#" title="按最新排序">最新</a>
                <a style="float: right;margin: 0px 10px" href="#" title="按最热排序">最热</a>
            </div>
            <!--文章列表-->
            <div style="float: left;">

                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-body ">
                                <a class="media-heading jf-art-item-title" href="./ariticle.html">nginx入门系列（四）：nginx的location配置</a>
                                <div style="color: gray;">
                                    <span class="jf-item-span">(90)&nbsp;浏览</span>
                                    <span class="jf-item-span">(90)&nbsp;浏览</span>
                                    <span  style="float: right">创建于&nbsp;2016-12-12</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-body ">
                                <a class="media-heading jf-art-item-title" href="./ariticle.html">nginx入门系列（四）：nginx的location配置</a>
                                <div style="color: gray;">
                                    <span class="jf-item-span">(90)&nbsp;浏览</span>
                                    <span class="jf-item-span">(90)&nbsp;浏览</span>
                                    <span style="float: right">创建于&nbsp;2016-12-12</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-body ">
                                <a class="media-heading jf-art-item-title" href="./ariticle.html">nginx入门系列（四）：nginx的location配置</a>
                                <div style="color: gray;">
                                    <span class="jf-item-span">(90)&nbsp;浏览</span>
                                    <span class="jf-item-span">(90)&nbsp;浏览</span>
                                    <span style="float: right">创建于&nbsp;2016-12-12</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-body ">
                                <a class="media-heading jf-art-item-title" href="./ariticle.html">入门系列的配置入门系列的配置入门系列的配置</a>
                                <div style="color: gray;">
                                    <span class="jf-item-span">(90)&nbsp;浏览</span>
                                    <span class="jf-item-span">(90)&nbsp;浏览</span>
                                    <span style="float: right">创建于&nbsp;2016-12-12</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



            </div>


            <!--创建的专辑-->
            <div class="jf-hr">
                创建的专辑
                <!--<a style="float: right;margin: 0px 10px" href="#" title="按最新排序">最新</a>-->
                <!--<a style="float: right;margin: 0px 10px" href="#" title="按最热排序">最热</a>-->
            </div>

            <div class="col-xs-12" style="padding: 0px">
                <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                    <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                    <div class="jf-album-cell-title">
                        <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                    </div>
                </div>

                <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                    <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                    <div class="jf-album-cell-title">
                        <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                    <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                    <div class="jf-album-cell-title">
                        <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                    <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                    <div class="jf-album-cell-title">
                        <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                    </div>
                </div>

            </div>

            <!--收藏的专辑-->

            <div class="jf-hr">
                收藏的专辑
            </div>

            <div class="col-xs-12" style="padding: 0px">
                <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                    <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                    <div class="jf-album-cell-title">
                        <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                    </div>
                </div>

                <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                    <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                    <div class="jf-album-cell-title">
                        <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                    </div>
                </div>

                <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                    <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                    <div class="jf-album-cell-title">
                        <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                    </div>
                </div>

                <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                    <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                    <div class="jf-album-cell-title">
                        <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                    </div>
                </div>

            </div>

        </div>




        <!-- 右侧展示栏-->

        <div class="col-md-3 hidden-xs hidden-sm">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>
                        Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。
                        如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。下面的实例演示了这点：
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container" style="margin-top: 100px">
    <footer >
        <div style="text-align: center">
            Copyright © 2016 jframe.cn<br>
            蜀ICP备16009498号
        </div>

    </footer>
</div>


</body>
</html>
